<template>
	<view>
		<view class="bg">
			<view class="user-info" v-for="(item,index) in address_list" :key="item.id">
				<view class="left-detail">
					<view class="detail-info">
						<view class="name-phone">
							<view>{{item.real_name}}</view>
							<view>{{item.phone}}</view>
						</view>
						<view class="address-info">{{item.province+item.city+item.district+item.detail}}</view>
					</view>
					<view class="default" v-show="item.is_default">默认</view>
					<view class="default-none" v-show="!item.is_default"></view>
				</view>
				<view>
					<navigator :url="'/pages/user/address/edit/edit?item='+ encodeURIComponent(JSON.stringify(item))"
						hover-class="none">
						<image src="../../../../static/img/address/address_edit.png" class="edit-info" mode="" />
					</navigator>
				</view>
				<view>
					<image src="../../../../static/img/address/address_del.png" class="del-info" mode=""
						@click="showModal(item.id,index)" />
				</view>
			</view>
			<view style="padding: 10rpx 80rpx;">
				<u-divider text="我也是有底线的~"></u-divider>
			</view>
		</view>
		<navigator url="/pages/user/address/add/add" hover-class="none">
			<view class="new-address">新建收货地址</view>
		</navigator>
		<u-modal content="确定要删除该收货地址吗？" :show="del_show" showCancelButton closeOnClickOverlay @confirm="confirm"
			@cancel="cancel" @close="close"></u-modal>
	</view>
</template>

<script>
	import { user } from "../../../../api/index.js";
	export default {
		onLoad() {
			this.getAddressList();
		},
		data() {
			return {
				address_list: [],
				del_show: false,
				index: '',
				id: '',
			}
		},
		methods: {
			// 获取收货地址
			async getAddressList() {
				let { status, msg, data } = await user.address_list();
				if (status === 200) {
					this.address_list = data;
				}
			},
			showModal(id, index) {
				this.id = id;
				this.index = index
				this.del_show = true;
			},
			cancel() {
				this.del_show = false;
			},
			close() {
				this.del_show = false;
			},
			async confirm() {
				let { status, msg } = await user.del_address({ id: this.id });
				if (status === 200) {
					this.address_list.splice(this.index, 1);
					this.del_show = false;
				}

			}
		}
	}
</script>

<style lang="scss">
	.bg {
		padding: 20rpx 0 100rpx 0;

		.user-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 28rpx 20rpx 29rpx 25rpx;
			margin: 10rpx 0;
			background-color: #ffffff;

			.left-detail {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.detail-info {
					width: 444rpx;

					.name-phone {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 28rpx;
						color: #333333;
						padding-bottom: 36rpx;
					}

					.address-info {
						font-size: 24rpx;
						color: #666666;
					}
				}

				.default {
					width: 70rpx;
					height: 30rpx;
					text-align: center;
					line-height: 30rpx;
					border: 1rpx solid #c55a5c;
					border-radius: 5rpx;
					font-size: 20rpx;
					color: #c55a5c;
					margin-left: 20rpx;
				}

				.default-none {
					width: 70rpx;
					height: 30rpx;
					margin-left: 20rpx;
				}
			}

			.edit-info {
				width: 33rpx;
				height: 36rpx;
			}

			.del-info {
				width: 29rpx;
				height: 29rpx;
			}

		}
	}

	.new-address {
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 708rpx;
		background-color: #c55a5c;
		font-size: 28rpx;
		color: #ffffff;
		margin: 0 auto;
		text-align: center;
		padding: 24rpx 0;
		border-radius: 10rpx;
	}
</style>

<style>
	page {
		background-color: #f4f8f7;
	}
</style>